Cara Memasang Widget Share Button Facebook, Twitter, Google di Blog

Cara Memasang Widget Share Button Facebook, Twitter, Google di Blog -

;Belakangan ini saya berkunjung  ke sebuah blog, dan saya menemukan sesuatu yang unik di blog sahabat saya tersebut. Saya menemukan widget share botton. Kemudian saya mencoba memasangnya, karena widget ini akan memudahkan pengunjung blog kita untuk mengshare apa yang ada di blog kita. Dan hal ini juga akan berdampak positif ke blog kita.. karena ini bisa menjadi media marketing gratis buat para blogger , untuk itu saya akan membagaikan kepada para sahabat – sahabat blogger sekalian tentang cara membuat share botton. Berikut langkah- langkahnya :

1. Login ke dasbor blog anda
2. Pilih rancangan
3. Pilih tambah gadget
4. Pilih Html/Java script
5. Copy kode Html di bawah ini
6. Pastekan di Html/ Java Script tadi
7. Simpan
8. Selesai

Kode Share button

<!--Widget Share Button Melayang Start-->

<style>

#pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px

0;z-index:10;}

#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

.fb_share_count_top {width:48px !important;}

.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

</style>
<div id='pageshare' title="bagikan ke teman anda">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>

<div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>

<div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div>

<div class='sbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><br/><div style="clear: both;font-size: 9px;text-align:center;"><a href="http://mhdyani73.blogspot.com/2012/11/cara-memasang-widget-share-button.html" target="blank" title="Cara Memasang Widget Share Button Facebook"><font color="blue">[Get Widget]<font></font></font></a></div></div>

<!--Widget Share Button Melayang End-->

Catatan : untuk tulisan warna hijau anda dapat mengeditnya sesuai keinginan anda. Dan tulisan warna merah bisa anda hapus jika anda ingin tampilan yang simple.

contoh hasilnya

                                                                            

Read More

Cara Buat User Online Status / Visits

Buat para blogger mengetahui seberepa besar pengunjung blognya itu penting.yaaa supaya tau seberapa banyak orang yang mengunjungi blog kita . dalam postingan kali ini saya akan menjelaskan bagaimana Cara Buat User Online Status di blog,dengan begitu kamu bisa tau seberapa banyak pengunjung blog kamu dan berapa orang yang sedang online di blog kamu. silakan liat contoh User Online Status yang ada dibawah ini.

 

Untuk membuat User Online Status di blog silakan ikuti tutorial Cara Buat User Online Status Berikut ini :

1.Klik http://www.histats.com/

2.Klik "Register" pada menu tab di website tersebut.

3.Isikan data diri anda dengan benar pada formulir pendaftaran tersebut.

4.Setelah kamu mengisi formulir pendaftaran dengan benar silakan Klik "Continue".

5.Pilih tampilan histats counter yang kamu inginkan,kemudian klik "Choose a counter from this category"

6.Selanjutnya kasih tanda titik pada radio button yang ada disamping tampilan histats yang kamu inginkan.

7.Selanjutnya Klik "Continue" Yang ada di bagian bawah.

8.Klik menu drop-down, pilih kategori yang ada untuk menampilkan counter. pilihan adalah: pengunjung hari ini, Page views today, User online, Total pengunjung, dan total tampilan halaman. kosongkan jika kamu tidak ingin menampilkan pilihan tersebut.

9.Kemudian klik "Continue"

10.Tunggu beberapa saat sampai histats counter terupdate.

11.Setelah itu copy code HTML dari histats counter ke blog kamu.

CARA-NYA :

1.Login Ke blogger dengan ID kamu.

2.Kemudian klik Tab menu "Tata Letak" lalu Klik "Tambah Gadget" pada elemen template.

3.Kemudian pilih kategori HTML/javascript pada jendela baru setelah kamu mengklik "Tambah Gadget"

4.Lalu paste Kode HTML dari histats counter di dalamnya .jangan lupa klik "save"

5.Selesai,tinggal kamu lihat hasilnya,..

Read More

Cara Membuat Tab Menu Horizontal Seperti Navbar Di Atas Header Halaman Blog

Ketika membuat blog dengan menggunakan platform Blogger atau Blogspot, maka secara default di atas header akan ditampilkan bilah mendatar berisikan beberapa menu yang biasa disebut dengan istilah ‘Navbar’ atau dapat pula disebut sebagai baris navigasi. Namun karena beberapa alasan (misalnya adalah untuk mempercantik tampilan halaman), maka tidak sedikit pengelola blog yang menyembunyikan bagian tersebut dengan cara menambahkan kode tertentu ke dalam template.

Apabila sekarang kita berbicara dan membahas mengenai navbar, maka perlu diketahui bahwasanya navbar tidak hanya dapat disembunyikan, namun dapat pula dilakukan kustomisasi untuk bagian tersebut yaitu dengan cara menambahkan navbar baru yang lebih ‘cantik’ bila dibandingkan dengan navbar standar Blogger. Dan untuk mempermudah pemahaman mengenai navbar baru yang dimaksud di sini, maka Anda dapat melihatnya pada gambar di tas, dalam hal ini adalah bagian yang ditunjukkan dengan tanda anak panah.

Oke, sekaligus menanggapi pertanyaan Sobat Blogger dalam artikel tanya jawab tentang bagaimana cara membuat menu navbar seperti yang tampak pada gambar di atas, maka sekarang kita langsung pada pokok pembahasan yaitu mengenai cara membuat bilah navigasi di atas header sebagai pengganti navbar. Dimana teknik yang perlu dilakukan untuk keperluan tersebut adalah dengan cara mengerjakan langkah-langkah berikut ini secara berurutan.

Pertama, buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’.

Kedua, cari ]]></b:skin> dan kemudian sisipkan kode di bawah ini tepat di atasnya.

#navbar-iframe {
  height:0px; visibility: hidden; display: none;
}

Keterangan:

Kode tersebut berfungsi untuk menyembunyikan navbar standar Blogger, sehingga apabila sebelumnya Anda telah menyembunyikan navbar standar maka lewati langkah ini dan lanjutkan pada langkah yang ketiga.

Ketiga, sisipkan rangkaian kode CSS berikut ini tepat di atas ]]></b:skin> .

/*--------------------------------------------------------------
Kustomisasi Bilah Menu Navigasi Di Atas Header Halaman Blog
Oleh: Semar Bingung
Blog: ELTELU -:[SEMAR BINGUNG'S WEBLOG]:-
URL : http://eltelu.blogspot.com/
--------------------------------------------------------------*/
.bilah-menu-atas {
  width: 100%;
  min-width: 960px;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 27px;
  font-size: 13px;
  z-index: 99;
  white-space: nowrap;
  background-color: #336699;
  background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #336699 100%);
  box-shadow: 0px 2px 0px rgb(14, 90, 140);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.kolom-utama {
  -moz-transition: all 0.2s linear 0s;
  width: 960px;
  height: auto;
  margin: 0px auto;
}

.kolom-menu {
  width: 521px;
  height: auto;
  margin: 0px 0px 0px -41px;
  float: left;
  display: inline;
}

.kolom-menu ul {
  height: auto;
  margin-top: 0px;
}

.kolom-menu ul li {
  float: left;
  position: relative;
  list-style: none outside none;
}

.kolom-menu ul li:first-child {
  border-left: 1px solid rgba(30, 30, 30, 0.125);
}

.kolom-menu ul li a {
  color: #ffffff;
  font-weight: bold;
  text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
  text-decoration: none;
  display: inline-block;
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 5px;
  padding-left: 10px;
  position: relative;
  border-right: 1px solid rgba(30, 30, 30, 0.125);
  box-shadow: 1px 0px 0px rgba(255, 255, 255, 0.1);
}

.kolom-menu ul li a:hover, .kolom-menu ul li a:focus {
  background-color: rgba(255, 255, 255, 0.125);
}

Keterangan:

Warna yang dihasilkan oleh rangkaian kode CSS di atas adalah warna biru untuk background dan putih pada teks. Sehingga apabila belum sesuai dengan desain tampilan halaman blog Anda, maka sesuaikan warna yang digunakan dengan mengganti kode warna yang dipakai pada bagian color:, background-color:, dan background-image:.

Keempat, cari kode <body dan kemudian sisipkan rangkaian kode dengan format seperti contoh berikut ini tepat di bawahnya.

<div class='bilah-menu-atas' id='bilahmenuatas'>
  <div class='kolom-utama'>
    <div class='kolom-menu'>
      <ul>
        <li><a href='http://eltelu.blogspot.com/'><img alt='L3' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGCWR8ADyuNgwm8md6ghK30JhS-hCoyJ42zOPYjxvuwUBlmQU_e36dj2-ahri_JVVd2ad0QqZofSDy7EKmRCMirdeYGpD2kVwsJLlUMObRNiNBaS0wNqGu7icIIU_k7jI9PxZAC4feFDQ/s800/Beranda.png' width='20px'/></a></li>
        <li><a href='URL'>Menu Kiri 1</a></li>
        <li><a href='URL'>Menu Kiri 2</a></li>
      </ul>
    </div>
    <div class='kolom-menu'>
      <ul style='float: right'>
        <li><a href='URL'>Menu Kanan 1</a></li>
        <li><a href='URL'>Menu Kanan 2</a></li>
      </ul>
    </div>
  </div>
</div>

Keterangan:

Ganti http://eltelu.blogspot.com/ dengan URL blog Anda dan ganti pula kata URL dengan link artikel yang akan ditautkan. Dan kemudian ubah kata Menu Kiri 1, Menu Kiri 2, Menu Kanan 1 dan Menu Kanan 2 sesuai dengan menu tampilan yang dikehendaki.

Kelima, simpan template.

Setelah template disimpan maka navbar standar Blogger tidak lagi ditampilkan di halaman blog dan akan tergantikan dengan navbar baru seperti yang tampak pada gambar di atas. Kemudian perlu diketahui bahwa rangkaian contoh kode pada langkah yang keempat akan menghasilkan 2 (dua) buah kolom menu. Kolom sebelah kiri berisikan 3 (tiga) buah menu yaitu Beranda (Home), Menu Kiri 1, dan Menu Kiri 2, sedangkan kolom sebelah kanan berisikan 2 (dua) buah menu yaitu Menu Kanan 1 dan Menu Kanan 2. Sehingga apabila belum sesuai dengan keinginan, maka silakan dilakukan kustomisasi seperlunya dengan menambahkan atau mengurangi kode <li><a href='URL'>Menu</a></li>.

Semoga berguna dan bermanfaat.

Salam.

Read More

Cara Menjadikan Setiap Kalimat Atau Paragraf Dalam Artikel Otomatis Rata Kiri Dan Kanan

Sobat Blogger, seperti yang kita ketahui bersama bahwasanya apabila menyusun artikel dengan menuliskannya menggunakan editor Blogger, maka setelan perataan default yang dipakai pada tiap kalimat atau paragraf dalam artikel tersebut adalah teks rata kiri. Sehingga dengan sistem perataan teks rata kiri seperti ini, maka kita harus mengubah setelan perataan (alignment) dari setiap paragraf agar tampak lebih rapi (sebagai contoh misalnya adalah dengan menggunakan sistem perataan justify atau rata kiri dan kanan) sebelum artikel tersebut diterbitkan.

Dalam hal mengatur setelan perataan teks untuk setiap kalimat atau paragraf yang terdapat dalam artikel sebenarnya tidaklah sulit, karena dapat dilakukan secara cepat yaitu dengan cara mengeblok kalimat atau paragraf yang dimaksud dan kemudian mengeklik salah satu tombol perataan teks yang terdapat dalam toolbar alignment. Namun perlu diketahui bahwasanya pengaturan untuk setelan perataan teks dapat dipermudah lagi yaitu dengan menambahkan kode CSS tertentu ke dalam template, sehingga setelah artikel diterbitkan maka secara otomatis sistem perataan teks yang digunakan pada setiap kalimat atau paragraf yang terdapat dalam artikel tersebut adalah sesuai dengan sistem perataan teks yang dipakai pada kode CSS dalam template.

Sebagai contoh misalnya jika setelan sistem perataan teks yang dipakai pada kode CSS dalam template adalah rata kiri-kanan (justify), maka tanpa harus melakukan pengaturan perataan teks pada setiap kalimat atau paragraf, secara otomatis setelah artikel diterbitkan setiap kalimat atau paragraf yang terdapat di dalamnya akan menjadi rata kiri-kanan. Demikian pula jika setelan perataan teks yang dipakai adalah rata tengah atau rata kanan, maka setelah artikel diterbitkan secara otomatis pula setiap kalimat atau paragraf yang terdapat di dalamnya akan menjadi rata tengah atau rata kanan.

Oke, selanjutnya untuk keperluan tersebut dapat dilakukan dengan cara mengerjakan langkah-langkah berikut ini secara berurutan.

Pertama, buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’.

Kedua, cari kode ]]></b:skin> dan kemudian sisipkan kode CSS berikut ini tepat di atasnya.

.post-body.entry-content {
  text-align: justify;
}

Ketiga, simpan template.

Dengan demikian maka Anda tidak perlu lagi repot-repot menentukan sistem perataan teks yang digunakan untuk setiap kalimat atau paragraf yang terdapat dalam artikel, karena setelah diterbitkan maka secara otomatis setiap kalimat atau paragraf yang terdapat dalam artikel tersebut akan menjadi rata kiri-kanan. Sehingga dengan demikian dapat diartikan pula bahwa Anda dapat menulis dan atau menyusun artikel untuk kemudian diterbitkan tanpa perlu mengkhawatirkan sistem perataan teks yang digunakan untuk artikel tersebut karena sistem perataan teks secara otomatis akan menyesuaikan dengan sistem perataan yang digunakan pada kode CSS di atas.

Semoga berguna dan bermanfaat.

Salam.

Read More

Cara Memasang Related Posts atau Artikel Yang Berkaitan

Related post atau artikel yang berkaitan merupakan sebuah cara untuk menampilkan link-link artikel yang berkaitan dengan artikel utama dan biasanya terletak dibawah artikel utama.
seperti inilah contonya

Pemasangan related post ini biasanya dikelompokkan berdasarkan label atau kategori. Jadi jika ada salah satu artikel dari label tertentu ditampilkan maka artikel-artikel lain yang mempunyai label sama juga akan ikut muncul dibawah artikel tersebut.

Tujuan pemasangan related post ini agar pengunjung lebih mudah untuk mencari artikel yang berkaitan dengan artikel utama. Sehingga pengunjung tidak perlu report untuk mencari satu persatu artikel dalam menu label atau kategori
Gmn uda jelaskan? Nah bagi yang tertarik memasang related posts di blog anda, silahkan ikuti langkah-langkah dibawah ini:

1. Login ke Blogger. Pilih menu Design -> Edit HTML
2. Back-up terlebih dahulu template Anda dengan cara klik Download Full Template.
3. Setelah itu, beri tanda centang pada kotak "Expand Widgets Template".
4. Cari kode <data:post.body/>
5. Jika sudah ketemu, letakkan kode dibawah ini dibawah <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>

<div class='widget-content'>
<h3>Artikel yang berkaitan</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;


function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;

var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>

</div>
</b:if>

Catatan:
Jika blog anda menggunakan kode read more maka biasanya ada 2 kode <data:post.body/> Letakkan kode diatas pada kode yang pertama.

6. Kalau sudah, klik Save Template lalu klik View Blog untuk melihat hasilnya.

Anda bisa mengganti teks "Artikel yang berkaitan" pada kode diatas dengan teks lain sesuai dengan keinginan anda.


Selamat mencoba..

Read More

Cara Membuat Kolom Komentar Bertingkat di Blogger

Banyak cara untuk membuat kolom komentar bertingkat di blogger, maksudnya bertingkat adalah antara kolom komentar pengunjung dengan kolom komentar admin tidak sejajar. Dengan fitur komentar bertingkat ini, kita dapat langsung menuliskan balasan komentar di bawah komentar pengunjung yang ingin kita balas dengan mengeklik link "Balas" yang ada di bawah komentar pengunjung tersebut. Nantinya, bila komentar balasan ini telah dipublikasikan maka komentar itu akan muncul di bawah komentar yang dibalas seperti halnya pada komentar blog WordPress.

Perlu diketahui, setelah kita menerapkan komentar bertingkat ini, mungkin ada aplikasi yang berkaitan dengan komentar menjadi tidak berfungsi lagi, seperti warna kotak komentar admin yang berbeda, emoticons, dan lain sebagainya.

Bagi yang menggunakan template bawaan Blogger dapat mencoba cara di bawah ini untuk mengaktifkan fitur komentar bertingkat.

1. Masuk ke akun Blogger Anda.

2. Setelah berada di laman Dasbor, klik menu "Setelan" kemudian pilih "Komentar". Pada bagian "Komentar" tentu saja pilih tampilkan. Sedangkan di bagian "Penempatan Formulir Komentar" pilih "Disematkan di bawah entri".

3. Selanjutnya klik tombol "SIMPAN SETELAN" yang berada pada bagian bawah laman.

4. Masih berada di menu "Setelan", silakan klik tab "Feed Situs". Pada bagian "Izinkan Feed Blog" pilih "Penuh".

5. Kemudian klik tombol "SIMPAN SETELAN".

6. Selanjutnya silakan cek komentar pada blog Anda, apakah sudah berganti menjadi komentar bertingkat atau belum.

Nah, bagi yang menggunakan template modifikasi atau template hasil men-download dari pihak ke-tiga, bisa menyimak langkah-langkahnya di bawah ini.

1. Ikuti langkah-langkah di atas.

2. Klik Rancangan >> Edit HTML.

3. Klik Download Template Lengkap untuk membuat salinan template. Hal ini untuk berjaga-jaga jika nanti terjadi kesalahan, kita sudah mempunyai backup sehingga dengan mudah mengembalikan template seperti semula.

4. Beri tanda centang pada "Expand Template Widget".

5. Silakan cari kode <b:include data='post' name='comments'/>

Bila Anda menggunakan peramban web Mozilla Firefox, Anda dapat menekan tombol Ctrl + F pada keyboard. Kemudian copy kode yang akan dicari tersebut dan paste di kotak yang tersedia, kemudian klik tab "Sorot semuanya". Nah, sekarang kode-kode yang dicari akan mempunyai warna latar belakang teks berwarna ungu. Kode tersebut ada yang berjumlah 3, ada juga yang berjumlah 4, tergantung pada template yang dipakai.

Klik "Sorot semuanya".

6. Silakan ganti semua kode pada langkah nomor 5 yang ditemukan dengan kode di bawah ini.

<b:if cond='data:post.showThreadedComments'>

<b:include data='post' name='threaded_comments'/>

<b:else/>

<b:include data='post' name='comments'/>

</b:if>

7. Klik tombol "SIMPAN TEMPLATE".

8. Silakan lihat komentar blog Anda, apakah sudah mengalami perubahan menjadi komentar bertingkat atau belum.

Read More